近期项目中采用了tailwind，但是由于开发习惯使用webstorm，使用tailwind是没有智能提示，看到别人使用vscode时有tailwind的智能提示，用起来非常爽，无奈，试用了一段vscode，智能提示确实很爽，但是还是习惯用webstorm，又转了回来。

终于，webstorm发布了2021.3版本，新添加了tailwind的支持。

想要在webstorm中获得比较好的tailwind支持，需要将webstorm升级到2021.3之后的版本，我现在使用的是2021.3.1版本，建议升级到2021.3.1版本，这个版本比2021.3版本更好的支持tailwind了！

当然，一个更重要的提示，在2021.3版本以后，webstorm正版验证需要登录验证的方式，以往的破解方法全部失效！ 所以你需要先获得一个验证授权，以使用webstorm。否则，你升级后是无法使用ide的！

以下，先确保你升级后可以获得ide验证授权！否则，你什么都做不了!

1.先备份好webstorm设置，然后在控制面版中彻底卸载webstorm，删除所有配置！

备份数据，升级后可以导入原有配置。

2.官网下载webstorm2021.3.1版本，安装，导入配置。

3.打开你的项目，卸载掉tailwind，

然后删除掉node_modules文件夹，和package-lock.json文件，然后在安装tailwind，使用如下命令以确保postcss的兼容性。

然后执行 npm install 安装项目依赖

4.添加tailwind，postcss配置文件，如果你已经有tailwind，postcss配置文件跳过该步骤，

做这些的目的感觉就像是让webstorm检测到你使用了tailwind，接下来就可以在webstorm中使用tailwind了！

在指令中一样可以使用

鼠标悬停会有css样式预览

唯一感觉的不足是代码提示里没有css预览，下图是vscode的代码提示，有一个css预览，webstorm里暂时好像没有，不过影响不大，不影响使用~

 前面的tw-是我配置的tailwind前缀，用以区分原有css。

我发现了如何在代码提示中显示css预览了！

如图，原来是这样子的

 在出现代码提示后，按ctrl+q快捷键，就会出现css预览窗口。如图，在点击三个点按钮，选择自动显示，就可以啦。完美，非常完美~